<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <!-- 
    <link rel="apple-touch-icon" type="image/png"
        href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> -->
    <meta name="apple-mobile-web-app-title" content="CodePen">

    <!-- <link rel="shortcut icon" type="image/x-icon"
        href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

    <link rel="mask-icon" type=""
        href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
        color="#111" /> -->


    <title>CodePen - Parallax Photo Carousel</title>

    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> -->



    <style>
        html,
        body,
        .stage,
        .ring,
        .img {
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            user-select: none;
        }

        html,
        body,
        .stage {
            overflow: hidden;
            background: #000;

        }

        div,
        svg {
            position: absolute;
        }

        .container {
            perspective: 2000px;
            width: 300px;
            height: 400px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>

</head>

<body translate="no">
    <div class="stage">

        <div class="container">
            <div class="ring">
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
                <div class="img"></div>
            </div>
        </div>

    </div>
    <!-- <script
        src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script> -->

    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script>
    <script id="rendered-js">
        let xPos = 0;

        gsap.timeline().
            set('.ring', { rotationY: 180, cursor: 'grab' }) //set initial rotationY so the parallax jump happens off screen
            .set('.img', { // apply transform rotations to each image
                rotateY: i => i * -36,
                transformOrigin: '50% 50% 500px',
                z: -500,
                backgroundImage: i => 'url(https://picsum.photos/id/' + (i + 32) + '/600/400/)',
                backgroundPosition: i => getBgPos(i),
                backfaceVisibility: 'hidden'
            }).

            from('.img', {
                duration: 1.5,
                y: 200,
                opacity: 0,
                stagger: 0.1,
                ease: 'expo'
            }).

            add(() => {
                $('.img').on('mouseenter', e => {
                    let current = e.currentTarget;
                    gsap.to('.img', { opacity: (i, t) => t == current ? 1 : 0.5, ease: 'power3' });
                });
                $('.img').on('mouseleave', e => {
                    gsap.to('.img', { opacity: 1, ease: 'power2.inOut' });
                });
            }, '-=0.5');

        $('.ring').on('mousedown touchstart', dragStart);
        $('.ring').on('mouseup touchend', dragEnd);


        function dragStart(e) {
            if (e.touches) e.clientX = e.touches[0].clientX;
            xPos = Math.round(e.clientX);
            gsap.set('.ring', { cursor: 'grabbing' });
            $(window).on('mousemove touchmove', drag);
        }


        function drag(e) {
            if (e.touches) e.clientX = e.touches[0].clientX;

            gsap.to('.ring', {
                rotationY: '-=' + (Math.round(e.clientX) - xPos) % 360,
                onUpdate: () => { gsap.set('.img', { backgroundPosition: i => getBgPos(i) }); }
            });


            xPos = Math.round(e.clientX);
        }


        function dragEnd(e) {
            $(window).off('mousemove touchmove', drag);
            gsap.set('.ring', { cursor: 'grab' });
        }


        function getBgPos(i) {//returns the background-position string to create parallax movement in each image
            return 100 - gsap.utils.wrap(0, 360, gsap.getProperty('.ring', 'rotationY') - 180 - i * 36) / 360 * 500 + 'px 0px';
        }
//# sourceURL=pen.js
    </script>
</body>

</html>